<template>
  <div style="width: 100%">
    <a-button slot="title" @click="$router.back()" type="link" icon="arrow-left" title="返回上一级">返回上一级</a-button>
    <div class="pk-info">
      <div class="pk-logo"></div>
      <div class="pk-result-main">
        <div class="user-info" v-if="pkInfo.pkUser">
          <a-avatar class="user-info-img cursor" :src="pkInfo.pkUser.avatar" :title="pkInfo.pkUser.userName"
                    @click="$router.push({name:'userinfo',params:{userId:$encry(pkInfo.pkUser.userId)}})" alt="点击查看详情"/>
          <span class="user-info-name cursor" @click="$router.push({name:'userinfo',params:{userId:$encry(pkInfo.pkUser.userId)}})">{{pkInfo.pkUser.userName}}</span>
          <a-tag class="cursor" v-for="(tag,index) in pkInfo.pkUser.rankList || []" :key="index" :color="tag.rankColor">{{tag.rankName}}</a-tag>
        </div>
        <div class="pk-main-info">
          <div class="pk-title">
            {{pkInfo.pkTitle}}
            <a-badge style="font-weight: 500;color: #ccc" :color="pkInfo.pkStatus === 1 ? 'green' : 'red'" :text="pkInfo.pkStatus === 1 ? 'running' : 'stop'" />
          </div>
          <div class="pk-content">内容描述: {{pkInfo.pkContent}}</div>
          <div class="pk-footer">
            <a-space>
              <div>{{$moment(pkInfo.pkEndTime).format('yyyy-MM-DD HH:mm:ss')}}结束</div>
              <a-button :disabled="pkInfo.pkStatus === 2" type="link" style="font-size: 12px" @click="visible = true">发表</a-button>
            </a-space>
          </div>
          <!--                发表模态框-->
          <a-modal v-model="visible" title="发表观点" ok-text="确认" cancel-text="取消" @ok="submitHandler">
            <!--        发表观点-->
            <a-form>
              <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="处理方式"
              >
                <a-select placeholder="请选择正方反方" v-model="resultType" style="width: 100%">
                  <a-select-option :value="1">正方</a-select-option>
                  <a-select-option :value="2">反方</a-select-option>
                </a-select>
              </a-form-item>

              <a-form-item
                  :label-col="formItemLayout.labelCol"
                  :wrapper-col="formItemLayout.wrapperCol"
                  label="观点"
              >
                <a-textarea :rows="4" style="resize: none" v-model="resultContent" placeholder="请输入观点"></a-textarea>
              </a-form-item>
            </a-form>
          </a-modal>
        </div>
        <div class="idea" v-if="pkInfo.zlist && pkInfo.zlist.length > 0 || pkInfo.flist && pkInfo.flist.length > 0">
          <div class="left">
            <div class="title">正方观点</div>
            <div class="item" v-if="pkInfo.zlist && pkInfo.zlist.length > 0" v-for="item in pkInfo.zlist || []" :key="item.id">
              <a-space class="item-info" v-if="item.resultUser">
                <a-avatar class="avator cursor"
                          @click="$router.push({name:'userinfo',params:{userId:$encry(item.resultUser.userId)}})"
                          :src="item.resultUser.avatar" :alt="item.resultUser.avatar" :title="item.resultUser.userName"/>
                <a-tag v-for="(rank,index) in item.resultUser.rankList || []"
                       :color="rank.rankColor"
                       :key="index"
                       class="cursor">{{rank.rankName}}</a-tag>
                <a-space class="handler">
                  {{item.resultNiu}}
                  <a-icon title="取消支持" v-if="item.resultIsNiu === 1" style="color: #52c41a" class="cursor" type="like" @click="addNiu(item)" />
                  <a-icon title="支持" v-else class="cursor" type="like" @click="addNiu(item)"/>
                  <a-icon class="cursor deleteIdea"
                          title="删除此观点"
                          v-if="$store.state.user.loginUser.type === 1 ||
                          $store.state.user.loginUser.type === 2 || $store.state.user.loginUser.userId === item.resultUser.userId"
                          type="close-circle" @click="removeIdea(item)"/>
                </a-space>
              </a-space>
              <div class="item-content">
                {{item.resultContent}}
              </div>
            </div>
          </div>
          <div class="right">
            <div class="title">反方观点</div>
            <div class="item" v-if="pkInfo.flist && pkInfo.flist.length > 0" v-for="item in pkInfo.flist || []" :key="item.id">
              <a-space class="item-info" v-if="item.resultUser">
                <a-avatar
                    @click="$router.push({name:'userinfo',params:{userId:$encry(item.resultUser.userId)}})"
                    class="avator cursor" :src="item.resultUser.avatar" :alt="item.resultUser.avatar" :title="item.resultUser.userName"/>
                <a-tag v-for="(rank,index) in item.resultUser.rankList || []"
                       :color="rank.rankColor"
                       :key="index"
                       class="cursor">{{rank.rankName}}</a-tag>
                <a-space class="handler">
                  {{item.resultNiu}}
                  <a-icon title="取消支持" v-if="item.resultIsNiu === 1" style="color: #52c41a" class="cursor" type="like" @click="addNiu(item)" />
                  <a-icon title="支持" v-else class="cursor" type="like" @click="addNiu(item)"/>
                  <a-icon class="cursor deleteIdea"
                          title="删除此观点"
                          v-if="$store.state.user.loginUser.type === 1 ||
                          $store.state.user.loginUser.type === 2 || $store.state.user.loginUser.userId === item.resultUser.userId"
                          type="close-circle" @click="removeIdea(item)"/>
                </a-space>
              </a-space>
              <div class="item-content">
                {{item.resultContent}}
              </div>
            </div>
          </div>
        </div>
        <div class="idea" v-else>暂无观点,快去发表吧</div>
      </div>
    </div>
  </div>
</template>

<script>
import {addPkResult, getPkInfo, addResultNiu, removeIdea} from "@/api/pk";
import {removeRole} from "@/api/role";
const formItemLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20 },
};
const formTailLayout = {
  labelCol: { span: 4 },
  wrapperCol: { span: 20, offset: 4 },
};
export default {
  name: "detail",
  data(){
    return {
      id:undefined,
      pkInfo:{},
      resultType:1,
      resultContent:'',
      visible:false,
      formItemLayout,
      formTailLayout,
    }
  },
  mounted() {
    const id = this.$route.params.id;
    if (id){
      this.id = this.$dencry(id);
    }
    this.loadPkDetail();
  },
  methods:{
    // 加载pk详情
    async loadPkDetail(){
      const {code,data,msg} = await getPkInfo(this.id);
      if (code === 200){
        this.pkInfo = data;
      } else {
        console.log(msg);
      }
    },
    // 点赞与取消
    async addNiu(item){
      const {code,msg} = await addResultNiu(item.id);
      if (code === 200){
        this.loadPkDetail();
      } else{
        this.$message.error(msg);
      }
    },

    // 模态框确认回调
    async submitHandler() {
      const id = this.pkInfo.id;
      const resultType = this.resultType;
      const resultContent = this.resultContent;
      if (!resultType){
        this.$message.error("正方反方为必选项");
        return;
      }
      if (!resultContent || resultContent.length === 0){
        this.$message.error("观点描述为必填项");
        return;
      }
      let handlerParams = {
        pkId: id,
        resultType,
        resultContent
      }
      let result = await addPkResult(handlerParams);
      if (result.code === 200){
        this.visible = false;
        this.resultType = 1;
        this.resultContent = '';
        this.$message.success(result.msg);
        this.loadPkDetail();
      }else{
        this.$message.error(result.msg);
        this.visible = false;
        this.resultType = 1;
        this.resultContent = '';
      }
    },
    // 删除观点
    removeIdea(item){
      const _this = this;
      this.$confirm({
        title: '删除观点',
        content: '确认不在参与了么?',
        okText: '确认',
        okType: 'danger',
        cancelText: '放弃',
        onOk() {
          removeIdea(item.id).then(res => {
            const { code,msg } = res;
            if (code === 200){
              _this.$message.success(msg);
              _this.loadPkDetail();
            } else {
              _this.$message.error(msg);
            }
          }).catch(error => {
            console.log(error);
            _this.$message.error("操作异常");
          })
        },
        onCancel() {
          console.log("取消了删除");
        },
      });
    }
  }
}
</script>

<style lang="less" scoped>
.pk-info{
  width: 100%;
  min-height: 100vh;
  .pk-logo{
    width: 100%;
    height: 130px;
    background: url("./images/bbg.jpg") no-repeat;
    background-size: cover;
  }
  .pk-result-main{
    .user-info{
      padding: 5px 0;
      .user-info-img{
        margin-right: 10px;
      }
      .user-info-name{
        margin-right: 10px;
        font-size: 14px;
        font-weight: 600;
      }
    }
    .pk-main-info{
      .pk-title{
        font-size: 14px;
        font-weight: 600;
      }
      .pk-content{
        line-height: 30px;
        font-size: 13px;
        min-height: 60px;
      }
    }
    .idea{
      width: 100%;
      display: flex;

      .left{
        width: 50%;
        .title{
          line-height: 30px;
          text-align: center;
          color: green;
        }
      }
      .right{
        width: 50%;
        .title{
          line-height: 30px;
          text-align: center;
          color: red;
        }
      }
      .item{
        padding: 5px;
        .item-content{
          padding-left: 40px;
        }

        .deleteIdea:hover{
          color: red;
        }
      }
    }
  }
}
</style>
